<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/person/fontawesome/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="/css/global.css"/>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/css/modal.css">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }


    .head{
        height: 70px;
        position: relative;
        display: flex;
        align-items: center;
    }
    .head .title{
        margin-left: 20px;
    }
    /*.container .content{*/
        /*display: flex;*/
        /*justify-content: center;*/
    /*}*/
    .cancelAutoBuy{
        margin: 20px auto 20px;
        width: 650px;
        height: 35px;
        border-bottom: 1px solid #ccc;
    }
    #cancelAutoBuyBtn{
        width: 150px;
        height: 36px;
        font-size: 16px;
        border: 1px solid #ccc;
        background-color: #fff;
    }
   .bbbbb{
	   padding: 0 20px;
	   height: 36px;
	   line-height: 36px;
	   color: white;
	   background: #409EFF;
	   border: none;
   }
	
</style>
<body>
<div class="head">
<h2></h2>
</div>
<div id="changeInfo">
	<el-form ref="form" :model="userForm" label-width="80px" size="mini">
		<el-form-item label="昵称" prop="nickname">
			<el-input v-model="userForm.nickname" ></el-input>
		</el-form-item>
		
		<el-form-item label="年龄" prop="age">
			<el-input  v-model="userForm.age"></el-input>
		</el-form-item>
		</el-form-item>
		<el-form-item label="性别" prop="sex">
			<el-radio v-model="userForm.sex" label="1" border>男</el-radio>
			<el-radio v-model="userForm.sex" label="0" border>女</el-radio>
		</el-form-item>
		<el-form-item size="large">
			<el-button type="primary" @click="changeUserInfo">修改</el-button>
			<el-button>取消</el-button>
			<el-button type="danger"  @click="damageFormVisible=true">修改密码</el-button>
		</el-form-item>
	</el-form>
	<div>
		<el-dialog title="修改密码" :visible.sync="damageFormVisible" size="mini" :close-on-click-modal='false'>
			<el-form :model="damageFrom"  ref="damageFrom" label-width="100px" class="demo-ruleForm">
				<el-form-item label="当前密码" prop="initPass" >
					<el-input v-model="damageFrom.initPass"></el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPass">
					<el-input v-model="damageFrom.newPass"></el-input>
				</el-form-item>
				<el-form-item label="确认新密码" prop="againPass">
					<el-input v-model="damageFrom.againPass"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="modifyPassword()">提交</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>

</div>
<script th:inline="javascript">
	var userInfo = [[${session.loginUser}]]
</script>
<script>
	let changeApp = new Vue({
		el:"#changeInfo",
		data:{
			damageFormVisible:false,
			id:userInfo.id,
			userForm:{
				nickname:userInfo.nickname,
				age:userInfo.age,
				sex:userInfo.sex.toString(),
			},
			damageFrom:{
				initPass:'',
				newPass:'',
				againPass:'',
			}
			
			
		},
		methods:{
			// initUser(){
			// 	console.log("initUser++++++++++");
			// 	let url = "http://localhost:9999/user/getLoginUser"
			// 	axios.get(url,{params:{
			// 			// 不用写东西
			// 		}
			// 	}).then((resp)=>{
			// 		this.userInfo = resp.data.data;
			// 		this.id = this.userInfo.id;
			// 		this.nickname = this.userInfo.nickname;
			// 		this.sex = this.userInfo.sex;
			// 		this.age = this.userInfo.age
			// 	})
			// },
			changeUserInfo(){
				if (confirm("确认修改吗？")) {
					let url = "http://localhost:9999/user/modifyUserInfo"
					axios.post(url,{
						id:this.id,
						nickname:this.userForm.nickname,
						sex:this.userForm.sex,
						age:this.userForm.age
					}).then((res)=>{
						if (res.data.code == 200) {
							alert(res.data.msg);
							location.reload()
						} else {
							alert(res.data.msg);
						}
					})
				}
			},
			modifyPassword(){
				if(confirm("确认修改吗")){
					let url = "http://localhost:9999/user/modifyPassword"
					axios.post(url,{
						id:this.id,
						initPass:this.damageFrom.initPass,
						newPass: this.damageFrom.newPass,
						againNewPass: this.damageFrom.againPass
					}).then((res)=>{
						if (res.data.code == 200) {
							alert(res.data.msg);
							location.reload()
						} else {
							alert(res.data.msg);
						}
					})
				}
			},
		},
		created(){
		// this.initUser();
		}
	})
</script>
</body>
</html>